<template>
	<!-- 内容 -->
	<div class="main">
		<div class="wp-1432 other-main">
			<!-- <ul class="ul-listl2 ls not-page-navs">
				<li :class="tabIndex == index?'on':''" v-for="(item,index) in categoryList" :key='index'>
					<a class="con"  @click="touchToTab(index)" :style="tabIndex!=index?'background-size:cover;background-image:url('+item.image+')':''"><em class="bgl"></em>{{item.title}}</a>
					<div class="down" v-if="item.child&&item.child.length>0">
                        <dl>
							<dd @click.stop="touchToTab(-1,index)"><a :style="subChTabIdx<0?'color:#11CCB1':''">所有类别</a></dd>
                            <dd v-for="(chld,chx) in item.child" :key="chx" @click.stop="touchToSubTab(item,chld,chx,index)"><a :style="chld.id==child.id?'color:#11CCB1':''">{{chld.title}}</a></dd>
                        </dl>
                    </div>	
				</li>
			</ul> -->
			<!-- <div class="swiper-container page-navs">
				<div class="swiper-wrapper ">
					<li class="swiper-slide" :class="tabIndex == index?'on':''" v-for="(item,index) in categoryList" :key='index'>
								<span @click="touchToTab(index)" :style="tabIndex!=index?'background-size: cover;background-image:url('+item.image+')':''"><em class="bgl"></em>{{item.title}}</span>
						</li>
				</div>
			</div> -->
			<div class="n-work-top">
				<div class="n-work-panel-tit">原创作品</div>
				<div class="n-work-filter-area">
					<span class="desc">作品质量高、完成度高、具有独特创意，更容易上首页推荐哦！</span>
					<div class="right">
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex3 == -1?'编辑精选':categorys.tags[filtersIndex3].title}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView">
								<el-dropdown-item v-for="(item,index) in categorys.tags" :key="index" @click.native="touchToRank(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex2 == -1?'最新作品':categorys.news[filtersIndex2].title}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView">
								<el-dropdown-item v-for="(item,index) in categorys.news" :key="index" @click.native="touchToOrderColumn(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
			<!-- <div class="m-topl">
				<div class="cur">
					<span>{{breadTitle}}</span>
				</div>
				<ul class="ul-listl3 l1">
					<li>
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex3 == -1?'编辑精选':categorys.tags[filtersIndex3].title}}<em></em>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView" style="width: ;">
								<el-dropdown-item v-for="(item,index) in categorys.tags" :key="index" @click.native="touchToRank(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li>
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								<i class="i-label">排序方式：</i>{{filtersIndex2 == -1?'最新作品':categorys.news[filtersIndex2].title}}<em></em>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView" style="width: ;">
								<el-dropdown-item v-for="(item,index) in categorys.news" :key="index" @click.native="touchToOrderColumn(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
					<li>
						<el-dropdown class="set con">
							<span class="el-dropdown-link">
								{{filtersIndex1 == -1?'全部':categorys.filters[filtersIndex1].title}}<em></em>
							</span>
							<el-dropdown-menu slot="dropdown" class="muneView" style="width: ;">
								<el-dropdown-item v-for="(item,index) in categorys.filters" :key="index" @click.native="touchToComeFrom(item,index)" >{{item.title}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</li>
				</ul>
				<div @click="toAddWord" class="btn" style="cursor:pointer;">上传作品</div>
			</div> -->
			<ul class="games-data" :class="[model]">
                <li v-for="(item, idx) in articleList" :key="idx" class="dx-vd-item" :class="{'no-data':!item.id}">
                    <a class="fav-d-item" :href="'/work/'+item.id" target="_blank" v-if="item.id">
                    <div class="img-flex-box">
                        <div class="main-img">
                        <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                        </div>
                    </div>
                    <div class="bot-desc">
                        <span class="file-name">{{ item.title }}</span>
                    </div>
                    <div class="bot-author">
                        <a class="u" @click.stop="toUsercenter(item.member.id)">
                        <span class="img-box">
                            <img loading="lazy" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                        </span>
                        <span class="name">{{ item.member.userName }}<img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList" :src="tag.image" alt=""></span>
                        </a>
                        <div class="rt">
                        <span class="like-num">{{ item.praiseStr }}</span>
                        <div class="vnum">
                                {{ item.seeStr }}
                            </div>
                        </div>
                    </div>
                    </a>
                </li>
            </ul>
			<!-- 页码 -->
			<div class="pages new-page-layout pro-page-layout" v-if="articleList.length>0">
				<el-pagination background @size-change="changeSizeHandle" @current-change="currentChangeHandle" :current-page="currentPage"
				 layout="prev,pager,next" :page-size="queryParams.pageSize" :total="total">
				</el-pagination>
				<!-- <span class="page-prev" @click="handlePagePrev"></span>
				<span class="page-tip">第 {{queryParams.pageNum}} 页，共 {{totalPage}} 页</span>
				<span class="page-next" @click="handlePageNext"></span> -->
			</div>
		</div>

		<div class="n-work-adv" :style="'background-image:url('+advObj.image+');background-repeat:no-repeat;'">
			<div class="wp-1432">
				<div class="desc-tit">{{advObj.title}}</div>
				<div class="desc-sub-tit">{{advObj.description}}</div>
				<!-- <a class="start-go-op-btn" @click="toAddWord">{{advObj.urlDescription}}</a> -->
				<a class="start-go-op-btn" :href="advObj.url">{{advObj.urlDescription}}</a>
			</div>
		</div>
	</div>
	<!-- 内容 -->
</template>

<script>
	import SparkMD5 from 'spark-md5'
	import common from '../../static/utils/common.js';
	import API from '../../static/utils/API.js';
	import layer from "layui-layer";
	import '../assets/style/swiper.css'
	import api from '@/api/api'
	import Swiper from "swiper";
	export default {
		components: {
			layer
		},
		data() {
			return {
                model: 'small',
				breadTitle:'全部',
				child:{},
				subChTabIdx:-1,
				advImg:require('../assets/nine/n_work_adv.png'),
				defaultAvatar:require('../assets/images/imgl1.png'),
				defaultFmImg:require('../assets/images/imgl28.jpg'),
				queryParams: {
					pageNum: 1,
					pageSize: 12,
					orderByColumn: "createTime",
					isAsc: "desc",
					rank:'编辑精选',
					categoryId:1
				},
				articleList: [],
				total: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
				currentPage: 1,
				tabIndex: 0,
				categoryList: [],
				cateId: '',
				categorys: {
					tags:[],
					news:[],
					filters:[]
				},
				filtersIndex1: -1,
				filtersIndex2: -1,
				filtersIndex3: -1,
				getUrl:'',
				totalPage:0,
				advObj:{

				}
			}
		},
		async mounted() {
            $('#app').addClass('is-works');
			// document.title='原创作品-GAMEUI.NET-游戏UI/UX学习、交流、分享平台'
			let _cateId = this.$route.query.cate_id;
			let _p = this.$route.query.p;
			if(_p){
				this.queryParams.pageNum=_p;
				this.currentPage=_p;
			}
			if(_cateId != undefined){
				this.cateId = _cateId
			}
			//this.getCategorys();
			let that = this;
			let params = {
				parentId: 1,
				orderByColumn:'sort',
				pageSize:100,
				pageNum:1,
				isAsc:'asc'
			}
			let result=await api.getChildrenListByParentId(params);
			//common.requestGet(API.getChildrenListByParentId, params, function(result) {
			if (result.code === 0) {
				that.categoryList = [{title:'全部',image:require('../assets/images/all_bg.png')}].concat(result.data);
				for (var i in that.categoryList) {
					if (that.categoryList[i].id == that.cateId) {
						that.tabIndex = i
					}
				}
				// that.getArticleList()
				//that.getMuneList()
				params = {
					'type': 'discover'
				}
				let res=await api.getCategoryFilter(params);
				//common.requestGet(API.getCategoryFilter, params, function(res) {
				if (res.code == 0) {
					that.categorys = res.data
				}
				//})
			}
			//})
			
			this.queryList();

			
			
			result=await api.getArticleAdNew();
			if(result.code==0){
				this.advObj=result.data;
			}

			
			that.$nextTick(()=>{
				var mySwiper = new Swiper ('.swiper-container', {
					slidesPerView:3
					}) 
			})
		},
		watch:{
			$route (to, from) {
				let _cateId = this.$route.query.cate_id;
				if(_cateId != undefined){
					this.cateId = _cateId;
					this.queryParams.categoryId=_cateId;
				}
				this.getCategorys();
				this.queryList();
			}
		},
		methods: {
            loadError(e){
                e.target.removeAttribute('srcset');
            },
			onImgLoadError(e){
				e.target.src=this.defaultAvatar;
				e.target.srcset=this.defaultAvatar;
			},
			get_avatar_url(member={id:'', avatar:''}, n=1, w=30) {
    			if (!member.id || !member.avatar) return this.defaultAvatar
    			let hash = SparkMD5.hash(member.avatar).slice(0, 6)
    			return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    		},
    		get_avatar_urls(member={id:'', avatar:''}, w=30) {
    			return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    		},
			version(time) {
    			let date = new Date(time)
    			return date.getTime()
    		},
			base64(str) {
    			return Buffer.from(str).toString("base64").replace(/\//g, '%2F')
    		},
			handlePagePrev(){
				$('body,html').animate({
					'scrollTop':0
				}, 500);
				if(this.queryParams.pageNum==1)return;
				this.queryParams.pageNum--;
				this.queryList();
			},
			handlePageNext(){
				$('body,html').animate({
					'scrollTop':0
				}, 500);
				if(this.queryParams.pageNum==this.totalPage)return;
				this.queryParams.pageNum++;
				this.queryList();
			},
			touchToSubTab(parent,child,chx,parentIdx){
				this.child=child;
				this.breadTitle=parent.title+' - '+child.title;
				this.tabIndex=parentIdx;
				this.subChTabIdx=chx;
				console.log(this.subChTabIdx)
				if(chx==0){
					this.queryParams.categoryId = parent.id
				}else{
					this.queryParams.categoryId = child.id;
				}
				this.queryList();
			},
			async queryList(){
				var that =  this;
				let result=await api.articlelist(that.queryParams);
			 	//common.requestPost(API.articleList,that.queryParams,function(result){
				that.articleList = result.data;
                let domainUrl=that.$imgdomainurl;
                result.data.map(item=>{
                    let _vtime=null;
                    if(item.updateTime){
                        _vtime=item.updateTime;
                    }else if(item.createTime){
                        _vtime=item.createTime;
                    }else if(item.create_time){
                        _vtime=item.create_time.replace('T',' ');
                    }
                    _vtime=Math.abs(new Date(_vtime).getTime());
                    let srcsets=[];
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                    srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                    item.srcsets=srcsets.join(',')
                    item.lazy={
                        src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                        error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                    }
                })
				that.total=result.total;
				let rsnum=this.total%this.queryParams.pageSize;
					 
				let tnum=rsnum==0?this.total/this.queryParams.pageSize:parseInt(this.total/this.queryParams.pageSize+1);
				this.totalPage=tnum;
			 	//})
			},
			toPersonCenter(id){
				let routeData = this.$router.resolve({ path: "/personalCenter/"+id});
				window.open(routeData.href, '_blank');
			},
			getInfos:function(){
				let that = this
				let name = that.$route.query.name
				// console.log("显示标题__11__", name)
				if (name != undefined) {
					that.getName = name
				}
			},
			touchToComeFrom(item,index) {
				// let that = this
				this.filtersIndex1 = index
				// let param = {}
				// param['categoryId'] = this.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.filters[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })
				this.queryParams.comeFrom=item.value;
				//console.log(that.categorys.filters[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				// common.requestPost(url,param,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			touchToOrderColumn(item,index) {
				let that = this
				that.filtersIndex2 = index
				// let param = {}
				// param['categoryId'] = that.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.news[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })

				// console.log(that.categorys.news[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				this.queryParams.orderByColumn=item.value;
				// common.requestPost(API.articleList,this.queryParams,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			touchToRank(item,index) {
				// console.log("显示返回的______11___",index)
				// let that = this
				this.filtersIndex3 = index
				// let param = {}
				// param['categoryId'] = this.queryParams.categoryId
				// param['pageNum'] =this.queryParams.pageNum;
				// param['pageSize'] = this.queryParams.pageSize;
				// let _value=that.categorys.tags[index].value;
				// let _valueArray=_value.split('&');
				// _valueArray.forEach(f=>{
				// 	let _items=f.split('=');
				// 	param[_items[0]]=_items[1];
				// })

				this.queryParams.rank=item.value;

				//console.log(that.categorys.tags[index].value)
				//let url = API.articleList + '?' + that.categorys.tags[index].value
				// let url = API.articleList;
				// common.requestPost(API.articleList,this.queryParams,function(result){
				// 	that.articleList = result.data;
				// 	that.total=result.total;
				// })
				this.querylist();
			},
			async querylist(){
				let that=this;
				let result=await api.articlelist(this.queryParams);
				//common.requestPost(API.articleList,this.queryParams,function(result){
                    let domainUrl=that.$imgdomainurl;
                    result.data.map(item=>{
                        let _vtime=null;
                        if(item.updateTime){
                            _vtime=item.updateTime;
                        }else if(item.createTime){
                            _vtime=item.createTime;
                        }else if(item.create_time){
                            _vtime=item.create_time.replace('T',' ');
                        }
                        _vtime=Math.abs(new Date(_vtime).getTime());
                        let srcsets=[];
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                        item.srcsets=srcsets.join(',')
                        item.lazy={
                            src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
					that.articleList = result.data;
					that.total=result.total;
				//})
			},
			toArticleDetails: function(id) {
				let routeData = this.$router.resolve({ path: "/articleDetails/"+id});
				window.open(routeData.href, '_blank');
			},
			toAddWord: function() {
				this.$router.push("/inspiration");
			},
			// 每页显示的条数改变
			changeSizeHandle(val) {
				this.queryParams.pageSize = val // 改变每页显示的条数 
				this.queryParams.pageNum = 1 // 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
				this.getArticleList() // 点击每页显示的条数时，显示第一页
			},
			// current-change用于监听页数改变，而内容也发生改变
			currentChangeHandle(val) {
				window.history.pushState({}, 0, '/works?p='+val);

				$('body,html').animate({
					'scrollTop':0
				}, 500);
				this.queryParams.pageNum = val // 改变默认的页数
				this.currentPage = val
				this.getArticleList() // 切换页码时，要获取每页显示的条数
			},
			getArticleList: function() {
				var that = this;
				console.log(this.queryParams)
				common.requestPost(API.articleList, this.queryParams, function(result) {
                    let domainUrl=that.$imgdomainurl;
                    result.data.map(item=>{
                        let _vtime=null;
                        if(item.updateTime){
                            _vtime=item.updateTime;
                        }else if(item.createTime){
                            _vtime=item.createTime;
                        }else if(item.create_time){
                            _vtime=item.create_time.replace('T',' ');
                        }
                        _vtime=Math.abs(new Date(_vtime).getTime());
                        let srcsets=[];
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                        item.srcsets=srcsets.join(',')
                        item.lazy={
                            src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                            error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                        }
                    })
					that.articleList = result.data
				})
			},
			fetchArticleList:function(param){
				var that = this
				common.requestPost(API.articleList, param, function(result) {
					that.articleList = result.data
				})
			},
			touchToTab: function(index,subParentIdx) {
				if(this.tabIndex==index)return;
				this.tabIndex = index;
				this.subChTabIdx=-1;
				this.child={};
				this.queryParams.pageNum = 1;
				this.child={};
				if(index==0){
					this.queryParams.categoryId=1;
					this.breadTitle='全部';
				}else{
					if(index==-1){
						this.tabIndex=subParentIdx;
						index=subParentIdx;
					}
					this.queryParams.categoryId = this.categoryList[this.tabIndex].id;
					this.breadTitle=this.categoryList[index].title;
				}
				// console.log("显示导航标签____", this.categoryList)
				this.queryList()
			},
			async getCategorys() {
				let that = this;
				let params = {
					parentId: 1,
					orderByColumn:'sort',
					pageSize:100,
					pageNum:1,
					isAsc:'asc'
				}
				let result=await api.getChildrenListByParentId(params);
				//common.requestGet(API.getChildrenListByParentId, params, function(result) {
					if (result.code === 0) {
						that.categoryList = [{title:'全部',image:require('../assets/images/all_bg.png')}].concat(result.data);
						for (var i in that.categoryList) {
							if (that.categoryList[i].id == that.cateId) {
								that.tabIndex = i
							}
						}
						that.$nextTick(()=>{
							var mySwiper = new Swiper ('.swiper-container', {
								slidesPerView:3
								}) 
						})
						// that.getArticleList()
						that.getMuneList()
					}
				//})
			},
			async getMuneList() {
				let that = this
				let params = {
					'type': 'discover'
				}
				let res=await api.getCategoryFilter(params);
				//common.requestGet(API.getCategoryFilter, params, function(res) {
					if (res.code == 0) {
						that.categorys = res.data
					} else {
						layer.msg(res.msg)
					}
				//})
			}
		}
	}
</script>

<style scoped>
.ul-imgtxtq1 .pic img{
	width:100%;height:100%;
}

.is-tj{
	background:url('../assets/images/iconl18.png') no-repeat;
}

.n-work-adv{
	height:454px;
	margin-top:95px;
	background-size: cover;
}
.n-work-adv .wp-1432{
	padding-left:703px;
	padding-top:135px;
	color:#fff;
}
.n-work-adv .desc-tit{
	font-size:20px;
	line-height:20px;
}
.n-work-adv .desc-sub-tit{
	font-size:50px;
	line-height:48px;
	margin-top:20px;
	margin-bottom:40px;
}
.n-work-adv .start-go-op-btn{
	width:156px;
	line-height: 54px;
	border-radius:12px;
	background:#fff;
	color:#000;
	display: inline-block;
	padding-left:25px;
	font-size:18px;
	font-weight:500;
	background-image:url('../assets/nine/go_arrow_right_2.png');
	background-repeat: no-repeat;
	background-position:88% 24px;
}
.n-work-adv .start-go-op-btn:hover{
	background-color:#f0f3f2;
}








































</style>
